
<!DOCTYPE html> 
<html> 
 <head> 
 <title>jQueryMobile App</title> 
 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
 <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
 
 <script>
 $("#one").live("swipeleft", function()
 {
 $.mobile.changePage("#two", "slide", false, true);
 });
 
 $("#two").live("swipeleft", function()
 {
 $.mobile.changePage("#three", "slide", false, true);
 });
 $("#two").live("swiperight", function()
 {
 $.mobile.changePage("#one", "slide", true, true);
 });
 
 $("#three").live("swiperight", function()
 {
 $.mobile.changePage("#two", "slide", true, true);
 });
 </script>
 
 </head> 
 <body> 
  
 <div data-role="page" id="one"> 
 <div data-role="header"> 
 <h1>One</h1> 
 </div>
 <div data-role="content"> 
 <p>I'm page one of three.</p>
 <p>Swipe left to go to page two.</p> 
 </div>
 </div>
 
 <div data-role="page" id="two"> 
 <div data-role="header"> 
 <h1>Two</h1> 
 </div>
 <div data-role="content"> 
 <p>I'm page two of three.</p>
 <p>Swipe left to go to page three.</p>
 <p>Swipe right to go to page one.</p> 
 </div>
 </div>
 
 <div data-role="page" id="three"> 
 <div data-role="header"> 
 <h1>Three</h1> 
 </div><!-- /header --> 
 <div data-role="content"> 
 <p>I'm page three of three.</p>
 <p>Swipe right to go to page two.</p> 
 </div>
 </div>
 
 </body>
</html>

